import styles from '../styles.less';
import {Card, Divider, Upload, message, App} from 'antd';
import {connect} from 'umi';
import {PlusOutlined, LoadingOutlined} from '@ant-design/icons';
import {useCallback, useEffect, useState} from 'react';
import {HOST, SEX} from "@/constants";

const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('图片必须小于10MB!');
  }
  return isLt10M;
};

const LeftContent = props => {
  const [uploading, setUploading] = useState(false);
  const {loading, userInfo, dispatch} = props;
  const {message} = App.useApp();

  const getLoginUserInfo = useCallback(() => {
    dispatch({type: 'PUcenter/getLoginUserInfo'});
  }, [dispatch])

  useEffect(() => {
    getLoginUserInfo();
  }, []);

  const handleChange = (info) => {
    if (info.file.response && info.file.response.code === -1) {
      message.error(info.file.response.message);
    }
    if (info.file.status === 'uploading') {
      setUploading(true);
      return;
    }
    if (info.file.status === 'done') {
      setUploading(false);
      if (info.file.response) {
        let response = {...info.file.response};
        if (response.code === 0) {
          dispatch({
            type: 'PUcenter/updateAvatar',
            payload: response.data.url,
            callback: () => {
              getLoginUserInfo();
            }
          });
        }
      }
    }
  };

  const uploadButton = (
    <div>
      {uploading ? <LoadingOutlined/> : <PlusOutlined/>}
      <div
        style={{
          marginTop: 8,
        }}
      >
        上传头像
      </div>
    </div>
  );

  return (
    <Card bordered={false} loading={loading} className={styles.leftContent}>
      <div>
        <div className={styles.avatarHolder}>
          <Upload
            accept={'image/*'}
            listType="picture-circle"
            className="avatar-uploader"
            showUploadList={false}
            name="file"
            action={`${HOST}/admin/aliyun/oss/upload`}
            headers={{adminToken: window.localStorage.getItem('token')}}
            beforeUpload={beforeUpload}
            onChange={info => handleChange(info)}
          >
            {(userInfo && userInfo.avatar) ? (
              <img
                src={userInfo.avatar}
                alt="avatar"
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: '50%'
                }}
              />
            ) : (
              uploadButton
            )}
          </Upload>
          <div className={styles.name}>{userInfo && userInfo.nickname ? userInfo.nickname : '未设置'}</div>
        </div>
        <Divider style={{marginTop: 16, marginBottom: 12}} dashed/>
        <div className={styles.detail}>
          <div className={styles.line}>
            <div className={styles.label}>登录账号</div>
            <div>{userInfo && userInfo.username ? userInfo.username : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>手机号码</div>
            <div>{userInfo && userInfo.mobile ? userInfo.mobile : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>电子邮箱</div>
            <div>{userInfo && userInfo.email ? userInfo.email : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>性别</div>
            <div>{userInfo && SEX.get(userInfo.sex)}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>归属部门</div>
            <div>{userInfo && userInfo.deptNames ? userInfo.deptNames : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>岗位</div>
            <div>{userInfo && userInfo.postNames ? userInfo.postNames : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
          <div className={styles.line}>
            <div className={styles.label}>所属角色</div>
            <div>{userInfo && userInfo.roleNames ? userInfo.roleNames : '未设置'}</div>
          </div>
          <Divider style={{margin: '12px 0'}} dashed/>
        </div>
      </div>
    </Card>
  );
};

export default connect(({PUcenter, loading}) => {
  return {
    userInfo: PUcenter.userInfo,
    loading: loading.effects['PUcenter/getLoginUserInfo'],
  };
})(LeftContent);
